<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/home.css"/>
    <link rel="stylesheet" type="text/css" href="city/city.css">
    <link rel="stylesheet" type="text/css" href="js/shoppingCar.css">
    <script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="script/home_ban.js"></script>
    <script type="text/javascript" src="script/eg_top_search.js"></script>
    <script type="text/javascript" src="script/city.js"></script>
    <script type="text/javascript" src="script/snncar.js"></script>
    <script type="text/javascript" src="script/jquery.SuperSlide.2.1.1.js"></script>

    <!--导航登陆网页版下拉-->
    <script type="text/javascript">
        $(function () {
            var setTime;
            $(".egc-top .nav-cent .operate").hover(function () {
                var _this = $(this);
                setTime = setTimeout(function () {
                    _this.find(".sec-version").slideDown(200);
                    _this.find("i").removeClass("icon-angle-down").addClass("icon-angle-up");
                }, 200);
            }, function () {
                if (setTime) {
                    clearTimeout(setTime);
                }
                $(".egc-top .nav-cent .sec-version").slideUp(200);
                $(".egc-top .nav-cent .operate i").removeClass("icon-angle-up").addClass("icon-angle-down");
            });
        });
    </script>

    <!--下拉导航关闭-->
    <script type="text/javascript">
        $(function () {
            $('.menu-mb i').click(function () {
                $(".navigation-mb-list").slideDown(300);
            });
            $('.navigation-mb-list .list-close-btn').click(function () {
                $(".navigation-mb-list").slideUp(300);
            });
        });
    </script>

    <script type="text/javascript">
        $(function () {
            var scroll_heitht = $('body').offset().top;
            var isShow = true;
            $(window).scroll(function () {
                if ($(window).scrollTop() > scroll_heitht && isShow) {
                    $('.stress-search-box').slideDown(200);
                } else {
                    $('.stress-search-box').slideUp(200);
                }
            });
            $('.stress-close a').click(function () {
                isShow = false;
                $('.stress-search-box').slideUp(200).unbind(window, aa);
            });
        });
    </script>
</head>
<body>
<div v-if="showMessage" class="message-box">
    ${{messagee}}
</div>
<div id="userDiv">
    <div class="egc-top">
        <div class="nav-cent">
            <div class="top-r">
          <span id="noLoginSpan">
            <a href="javascript:void(0)" id="b-regist">注册</a>
            |
            <a href="#" id="b-login" class="b-login">登陆</a>
            |
             <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx03bd86056bd3fc0e&redirect_uri=http://wx.rongcarservice.com/callback.html&response_type=code&scope=snsapi_login&state=123456#wechat_redirect"
                id="b-wx-login">微信登陆</a>
            |
            <a href="/shoppingCar.html">购物车</a>
          </span>
          <span id="loginSpan" style="display: none;">

              <a href="#" id="b-logout" class="b-login">登出</a>
          </span>
            </div>
            <div class="top-l">全国统一客服热线：XXX</div>
            <div class="clear_fix"></div>
        </div>
    </div>
    <div class="w">
        <div class="cart-filter-bar" style="color: red;font-weight: bold;font-size: 16px;">
            <ul class="switch-cart">
                <li class="switch-cart-item">
                    <a href="#none" style="color: red;"><em>全部商品</em>
                        <span class="number" style="margin-left: 10px;">5</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="clr"></div>
        <div class="cart-thead" >
            <div class="column t-checkbox">
                <div class="cart-checkbox" >
                    <input type="checkbox"
                            id="checkbox"
                           name="select-all"
                           v-model="checkAll"
                           class="jdcheckbox"
                           @change="selectAll"
                           clstag="pageclick|keycount|Shopcart_CheckAll|0">
                </div>
                全选
            </div>
            <div class="column t-goods">商品</div>
            <div class="column t-props">&nbsp;</div>
            <div class="column t-price">单价</div>
            <div class="column t-quantity">数量</div>
            <div class="column t-sum">小计</div>
            <div class="column t-action">操作</div>
        </div>


        <div class="cart-tbody">
            <div v-for="cart in carList">

<!--            <div v-for="cart in carList">-->
            <div class="item-list">
                <div class="item-combine">
                    <div class="item-item item-seleted" id="10033665972623" data-sku="10033665972623"
                         data-ts="1681211004188" data-skuuuid="F1yA4r1202690684881702912">
                        <!-- 店铺标题 店铺名称-->
                        <div  class="shop">
                            <div class="cart-checkbox">
                                <input type="checkbox"
                                       name="checkShop"
                                       class="jdcheckbox"
                                       clstag="pageclick|keycount|Shopcart_CheckShop|1_10907465">
                            <span class="shop-txt">
                                <a href="//mall.jd.com/index-10662258.html" class="shop-name" target="_blank"
                                   rel="noreferrer" data-vendorid="10907465"
                                   clstag="pageclick|keycount|Shopcart_Shopid|10907465">
                                    <i class="vendor-icon undefined" title="">
                                    </i>{{cart.car.shopname}}
                                </a>
                                <i class="ml5 btn-im"></i>
                            </span>
                            </div>
                        </div>
                        <div class="item-form">
                            <div class="cell p-checkbox">
                                <div class="cart-checkbox">
<!--                                    <input type="checkbox"-->
<!--                                           v-model="cartSel"-->
<!--                                           name="checkItem"-->
<!--                                           :value="cart.id"-->
<!--                                           class="jdcheckbox"-->
<!--                                           clstag="pageclick|keycount|Shopcart_CheckProd|1_10033665972623"-->
<!--                                           checked="">-->

                                    <input type="checkbox"
                                           v-model="cartSel"
                                           name="checkItem"
                                           :value="cart.id"
                                           class="jdcheckbox"
                                           @change="selectItem">
                                    <span class="line-circle"></span>
                                </div>
                            </div>
                            <div class="cell p-goods">
                                <div class="goods-item">
                                    <div class="p-img ">
                                        <!--图片-->
                                        <img :src="cart.carImg" style="width: 170px" height="100px" >
                                    </div>
                                    <div class="p-msg">
                                        <div class="p-name">
                                            <a href="" target="_blank" rel="noreferrer" title="{{}}"
                                                 clstag="pageclick|keycount|Shopcart_Productid|10033665972623_9">
                                                <i class="product-icon " title=""></i>

                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="cell p-props">
                                <div class="props-txt"><span class="">{{cart.car.title}}</span></div>
                            </div>
                            <div class="cell p-price">
                                <span class="p-price-cont">{{cart.unitPrice*0.0001}}万</span>
                            </div>
                            <div class="cell p-quantity" style="margin-left:63px;">
                                <div class="cart-number quantity ">
                                    <button :disabled="quantity <= 1" class="cart-number-dec is-disabled">
                                        <i class="cart-icon-subt" @click="rednum(cart)">-</i>
                                    </button>
                                    <div class="cart-input">
<!--                                        <input class="cart-input-o" v-model="cart.num">-->
                                        <input class="cart-input-o" v-model="cart.num">
                                    </div>
                                    <button class="cart-number-inc">
                                        <i class="cart-icon-add" @click="addnum(cart)">+</i>

                                    </button>
                                </div>
                            </div>
                            <div class="cell p-sum"><strong>{{cart.price}}</strong></div>
                            <div class="cell p-ops" style="margin-left: 34px;">
                                <a href="#none" class="p-ops-item" clstag="pageclick|keycount|Shopcart_Delete|10033665972623" @click="cartdelete(cart.id)">删除</a>
                            </div>
                        </div>
                        <div class="product-extra mb10"></div>
                        <div class="item-line"></div>
                    </div>
                </div>
            </div>
        </div>
        </div>


        <div style="width: 100%; height: 100px; background-color: #EEEEEE; font-size: 20px; position: relative;">

            <div style=" width: 60%; position: absolute; top: -3px; left: 0; height: 100%; z-index: 1;">
                <div style="padding-left: 40px; margin-top: 45px; position: relative; z-index: 2;">
                    <a  style="font-size: 20px;margin-left: 50px" @click="DeleteSelected">删除选中的商品</a>
                    <a href="#none" class="opt-batch-follow"style="margin-left: 30px">移入关注</a>
                    <a href="#none" class="opt-cleaner" @click="clearCart" style="margin-left: 50px" title="亲，点我可快速清空购物车商品哦！">
                       <strong>清空购物车</strong>
                    </a>

                    <a href="#none" class="opt-cleaner" style="margin-left: 100px;font-size: 30px;color: #cc0000" >
                        <strong>去结算</strong>
                    </a>
                </div>
            </div>
            <!--  右  -->
            <div style=" width: 50%; position: absolute; top: 0; right: 0; height: 100%; z-index: 1; display: inline-block;">
                <div class="combine">
                    <div style="top: 52px">
                        <div class="price-sum-amout">
                            <div class="price-show" style="padding-top: 30px">
                                <span class="txt" style="padding-left: 30px;">总价：</span>
                                <span class="price priceShow"><em>￥{{Totalprice}}元</em></span>
                                <b class="ml5 price-tips"></b>
                                <div class="price-tipsbox-new">
                                    <div class="ui-tips-main" style="">不含运费及送装服务费</div>
                                    <span class="price-tipsbox-arrow"></span>
                                </div>
                            </div>
                            <div style="margin-left: 50%;padding-left: 60px;margin-top: -5%"  >
                            <span class="amount-sum">已选择<em>1</em>件商品<b class="up"></b></span>
                            </div>
                            </div>
                    </div>
                </div>
            </div>
        <div class="clr"></div>
    </div>
</div>


</div>
</body>

<!--引入vue和Axios.js 先导入vue  再导入axios -->
<script type="text/javascript" src="js/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="js/vue/dist/vue.js"></script>
<script type="text/javascript" src="js/axios/dist/axios.js"></script>
<script type="text/javascript" src="js/commons.js"></script>


<script>
    new Vue({
        el:"#userDiv",
        data:{
            carList:[],
            Totalprice:0,
            cartSel:[], //用于存储每个商品的选中状态
            checkAll:false, //新增状态，表示全选状态
            quantity:1,
            getForm:{
                id:[],
            },
            delOrComputeIds:[],
            showMessageFlag:false,
            messagee:""

        },
        methods:{

            //清空购物车
            clearCart(){
                this.$http.post('/cart/clearCart').then(res =>{
                    console.log(res,"865453")
                    console.log(res.status,"865453")

                    if (res.status=200){
                        this.getshopList()
                        alert("购物车以清空")
                        this.getshopList()
                    }else {
                        alert("清空购物车失败")
                    }
                })
                this.getshopList()
            },

            //全选框
            selectAll(){
                this.cartSel=[];//清空之前的选中状态
                if (this.checkAll){
                    //如果被选中，将每个商品的选中状态设为true
                    this.carList.forEach(cart =>{
                        this.cartSel.push(cart.id)
                        // console.log(cart.id)
                    });
                    this.ids();
                    this.handleCheckboxChange()
                }
            },
            // 添加此方法以处理复选框状态的变化
            handleCheckboxChange() {
                // 将更新后的复选框状态存储到本地存储中
                let valuemap = new Map;
                if (this.cartSel !=null){
                    const valuemap = this.cartSel
                    localStorage.setItem("valuemap",JSON.stringify(valuemap))
                    console.log(valuemap,"valuemap测试")
                }
            },
            // 从本地存储获取复选框状态
            getCheckboxState() {
                var storedUserId = localStorage.getItem('valuemap');
                this.cartSel = storedUserId
                console.log('Stored User ID:', storedUserId);

                // return JSON.parse(localStorage.getItem('checkboxState'));
            },

            // 独立选择某个商品
            selectItem() {
                console.log(this.cartSel)
              // if (!this.delOrComputeIds.includes(cartId)){
              //    this.delOrComputeIds.push(cartId);
              //     console.log(this.delOrComputeIds,"添加");;
              // }else {
              //     console.log("已存在")
              // }
                this.ids()

                // 判断商品是否在已选中的数组中
                // console.log(index,"index")
                // if (index != -1) {
                    // this.$set(this.cartSel,index,undefined)
                    // console.log(cartId,"cartId")
                    // 如果在，则移除
                    // this.cartSel = this.cartSel.filter(id => id !== cartId);
                    // console.log(this.cartSel,"99999")
                    // this.cartSel.push(cartId);
                // } else {
                    // 如果不在，则添加
                    // this.cartSel.push(cartId);
                    // console.log(cartId,"00000")
                // }
                // 检查是否全部商品都被选中，更新全选状态
                // this.checkAll = this.cartSel.length === this.carList.length;
                // 更新总价
                // this.ids();
            },
            //删除多选商品
            DeleteSelected(){
                let ids  = this.cartSel;
               this.$http.patch("/cart/DeleteSelected",ids).then(res =>{
                   this.$root.$emit("shnksjd");
                   this.getshopList()
                })
            },
            ids:function(){
              let ids  = this.cartSel;
                this.$http.post("/cart/ids",ids).then(res =>{
                    this.Totalprice=res.data.data.data
                })
            },


            batchRemove: function () {
                var ids = this.sels.map(item => item.id).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    // this.pachDelete()
                }).catch(() => {
                });
            },
            //添加数量
            addnum(cart){
                console.log(cart)
                this.getshopList();
                this.updateCart(cart);
                this.getshopList();
            },
            //减少数量
            rednum(cart) {
                if (cart.num > 1) {
                    this.getshopList();
                    this.reduce(cart);
                    this.getshopList();
                }
            },


            // rednum(cart){
            //   if (this.quantity >1){
            //       this.quantity -=1;
            //   }
            //     // 避免数量为负数，保持最小值为 1
            //   // this.quantity=1
            // },
            //  +
            updateCart(cart){
                this.$http.post('cart/num/', cart).then(res => {
                    this.getshopList();
                    })
                this.getshopList();
            },
            // -减
            reduce(cart){
                // if (cart.num !=0){
                    this.$http.post('cart/reducenum/', cart).then(res => {
                        this.getshopList();
                    })
                // }else {
                //     this.errMsg("亲！至少选择一个商品哦")
                // }


            },

            getshopList(){
                let str = JSON.stringify(data)
                this.$http.get("/cart")
                    .then(res =>{
                        res = res.data
                        this.carList = res.data
                        // console.log("返回数据2",res.data)
                        // console.log(this.carList,"99999999999")
                    })
            },
            //删除
            cartdelete(id){
                console.log(id,"hhhhhh")
                this.$http.delete("/cart/"+id).then(res =>{
                    res = res.data
                    if (res.success){
                        alert("删除成功")
                        this.getshopList()
                    }else {
                       alert("错误")
                    }
                })
            },

            //消息提示
            showMessage(message){
                this.messagee = message;
                this.showMessage = true;
                //3秒后消失
                setTimeout(()=>{
                    this.hideMessage();
                },3000);
            },
            //隐藏显示消息
            hideMessage(){
                this.showMessageFlag= false;
                this.messagee = "";
            },


        },
        mounted(){
            this.getshopList();
            this.getCheckboxState()
        },
    });
</script>


<!--多选框刷新复选-->
<!--<script>-->
<!--    let valuemap = new map;-->
<!--    if (this.cartSel !=null){-->
<!--       const valuemap = this.cartSel-->
<!--        console.log(valuemap,"valuemap测试")-->
<!--        localStorage.setItem("valuemap",valuemap)-->
<!--    }-->

<!--</script>-->

<style>
    /* 样式可以根据自己的需要进行调整 */
    .message-box {
        position: fixed;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #f5c6c6;
        color: white;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

</style>
</html>
